<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/imgareaselect-default.css" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
		$('#ladybug_ant').imgAreaSelect({
			maxWidth : 200,
			maxHeight : 200,
			minHeight:200,
			minWidth:200,
			handles : true
		});
		$('#bee').imgAreaSelect({
			aspectRatio : '4:3',
			handles : true
		});
		$('#duck').imgAreaSelect({
			x1 : 0,
			y1 : 90,
			x2 : 280,
			y2 : 210,
			resizable:false
		});
	});
</script>
</head>


<body>

	<div class="container" style="margin-top: 20px;">
		<div class="span9">
			<img alt="" src="img/ladybug_ant.jpg" id="ladybug_ant">
		</div>

		<div class="span9" style="margin-top: 20px;">
			<img alt="" src="img/bee.jpg" id="bee">
		</div>

		<div class="span9" style="margin-top: 20px;">
			<img alt="" src="img/duck.jpg" id="duck">
		</div>
	</div>


</body>


</html>